<template>
    <div></div>
</template>
<script>
import Emitter from '@/utils/emitter';
let columnIdSeed = 1
const getDefaultColumn = function (type, options) {
    const column = {};
    for (let name in options) {
        if (options.hasOwnProperty(name)) {
            const value = options[name];
            if (typeof value !== 'undefined') {
                column[name] = value;
            }
        }
    }
    if (!column.minWidth) {
        column.minWidth = 80;
    }
    column.property = column.property?column.property:''
    column.className = column.className?(column.property+" "+column.className): column.property

    column.realWidth = column.width === undefined ? 0 : parseInt(column.width);
    return column;
};
const NORMAL_RENDER = function (h, { row, column, $index }) {
    const property = column.property;
    const value = row[property];
    if (column && column.formatter) {
        return column.formatter(row, column, value, $index);
    }
    return value?value:'';
};
export default {
    name: 'UTableColumn',
    componentName: 'UTableColumn',
    mixins: [Emitter],
    props: {
        prop: String,
        label: String,
        type: {
            type: String,
            default: 'default',
        },
        width: {},
        formatter: Function,
        context: {},
        className: String,
        showOverflowEllipsis: Boolean,
    },
    data() {
        return {     
            columnId: -1,
    
        }
    },  
    
    computed: {
        owner() {// 寻找拥有tableId的外层组件
            let parent = this.$parent;
            while (parent && !parent.tableId) { 
                parent = parent.$parent;
            }
            return parent;
        },
    },
    created() {
        let parent = this.owner;
        this.columnId = parent.tableId + '_column_' + columnIdSeed++; 
        let type = this.type;
        let column = getDefaultColumn(type,{
            id: this.columnId,
            label: this.label,
            property: this.prop,
            type, 
            renderCell: null,
            width: this.width,
            className: this.className,
            formatter: this.formatter,
            context: this.context,
            showOverflowEllipsis: this.showOverflowEllipsis
        })
        let renderCell = column.renderCell;
        let _self = this;
        column.renderCell = function (createElement, data) {
            if (_self.$scopedSlots.default) {
                renderCell = () => _self.$scopedSlots.default(data);
            }
            if (!renderCell) {// table-header不渲染index的栏走这里，
                renderCell = NORMAL_RENDER;
            }
            let props = {
                class: 'cell'
            }
            if (column.showOverflowEllipsis) {
                props.class += ' u-line-ellipsis';
            }
            return (<div {...props}>{renderCell(createElement, data)}</div>);
        };

        this.columnConfig = column;
        if(type == 'index'){
            this.typeMatch()

        }
    },
    mounted() {
        let columnIndex = [].indexOf.call(this.owner.$refs.hiddenColumns.children, this.$el);
        this.owner.store.commit('insertColumn', this.columnConfig, columnIndex);
    },
    methods: {
        typeMatch(){
            this.columnConfig.renderCell = function (h, { $index, column }) {
                let i = $index + 1;
                return i;
            }
        },
    }
};
</script>
<style lang="scss" scoped>

</style>